<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  li {
    list-style: none;
  }

  .box {
    display: flex;
    flex-wrap: wrap;
    width: 560px;
    margin: 20px auto;
  }

  .box li {
    width: 100px;
    height: 100px;
    margin: 0 10px 10px 0;
  }

  .box li img {
    width: 100%;
    height: 100%;
    border: 2px solid red;
    border-radius: 10px 0 10px 0;
  }
</style>

<body>
  <script>
    let a = +prompt('输入1到20之间的数')
    document.write(`<ul class="box">`)

    for (let i = 1; i <= a; i++) {
      document.write(`
     <li><img src="王者荣耀images/${i}.webp" alt=""></li>
    `)
    }

    document.write(` </ul>`)
  </script>
</body>

</html>